<style src="@/css/add-paper.css"></style>
<style>
.add-paper-wrapper {
    width: 1000px;
    background-color: #F7F7F7;
}
.plan-item {
    margin-bottom: 20px;
    background-color: #FFF;

    & h2 {
        padding-left: 25px;
        color: #3A3A63;
        font-size: 16px;
        line-height: 60px;
        border-bottom: 1px solid #E1E7EB;
    }
}
.plan-item-content {
    padding: 30px 60px;
}
.plan-item-content.setting .el-input, .plan-item-content.setting .el-textarea {
    width: 400px;
}

.paper-content-select {
    margin: 0 90px;
    position: relative;
}
.add-subject-btn, .add-options-btn {
    width: 100%;
    position: absolute;
    color: #7485B1;
    font-size: 14px;
    text-align: center;
    border: 1px dashed #E1E7EB;
    line-height: 36px;
    pointer-events: none;

    &::before {
        content: "+";
        margin-right: 10px;
        font-size: 18px;
    }
}

.add-options-btn {
    margin-top: 10px;
    position: static;
    pointer-events: auto;
    cursor: pointer;
}


.single-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    color: #7485B1;
    font-size: 14px;

    & .el-input {
        display: inline-block;
        width: 300px;
        margin-left: 20px;
    }

    & .score-input {
        width: 40px;
        margin-right: 10px;

        & input {
            padding: 0;
            font-size: 14px;
            text-align: center;
        }
    }
}
.single-th {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 165px;
    height: 48px;
    padding-left: 10px;
    position: absolute;
    top: 144px;
    left: 360px;
    color: #3A3A63;
    font-weight: bold;
    box-sizing: border-box;
    border-bottom: 1px solid #ebeef5;
    background-color: #F4F7FD;
}
.single-input {
    width: 240px;
    height: 32px;
    padding-left: 10px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #c0c4cc;
}
.single-input:focus {
    outline: none;
}
.single-input::placeholder {
    color: #C1C6D4;
}
.single-icon-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;

    & .icons {
        display: none;
    }

    & span {
        display: block;
        width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.single-icon-wrapper:hover .icons {
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 20px;
    cursor: pointer;
    background: url(~@/images/paper-edit.png) no-repeat;
    background-size: 100%;
}

.paper-content {
    padding: 0;
    padding-bottom: 30px;
}
.paper-content ul {
    margin-bottom: 30px;
    counter-reset: c;
}
.paper-content-item {
    padding: 30px 90px;
    margin-bottom: 50px;
    position: relative;
    color: #7485B1;
    font-size: 14px;

    & h3 {
        margin-bottom: 30px;

        &::before {
            counter-increment: c;
            content: counter(c) '、';
        }
    }

    & li {
        display: flex;
        align-items: center;
        margin-bottom: 25px;
    }
}
.paper-content-item:hover {
    background-color: #FAFAFA;

    & .side-wrapper {
        display: flex;
    }
}
.side-wrapper {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 60px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border-left: 1px solid #E1E7EB;

    & span {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    & span:last-child {
        border-top: 1px solid #E1E7EB;
    }
}
.paper-delete-btn {
    width: 18px;
    height: 18px;
    cursor: pointer;
    background: url(~@/images/delete-icon.png) no-repeat;
    background-size: 100%;
}

.el-textarea {
    width: 340px;
}

.add-paper-wrapper .no-border {
    color: #7485B1;
    border: none;
}

.add-paper-wrapper .el-form-item__label {
    padding-right: 20px;
}

.add-paper-wrapper .operate {
    display: flex;
}

.add-paper-wrapper .operate .icon.iconfont {
    font-size:18px;
    color:#C1C6D4;
    margin-right:8px;
    font-weight: 400;
    cursor: pointer;
}


.add-paper-wrapper .operate .icon.iconfont.forbid {
    color:#E1E7EB;
}

.single-icon-input{
    color:#7485B1;
}

.add-paper-wrapper {
    .el-table {
        th {
            color:#3A3A63;
            font-weight: 400;

            &:first-child {
                padding-left:20px;
            }
        }

        td {
            &:first-child {
                padding-left:20px;
            }
        }
    }
}

</style>

<template>
    <div class="add-paper-wrapper">
        <div class="plan-item">
            <h2>问卷标题</h2>
            <div class="plan-item-content">
                <el-form ref="form" :model="form" :rules="rules" label-width="90px">
                    <el-form-item label="考试名称" prop="examName">
                        <el-input v-model="form.examName" maxlength="20" placeholder="请输入考试名称"></el-input>
                    </el-form-item>
                    <el-form-item label="问卷描述">
                        <el-input type="textarea" :rows="3" maxlength="140" resize="none" v-model="formSetting.desc" placeholder="请输入问卷描述"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="知识体系">
                        <el-select v-model="form.classify" popper-class="options" placeholder="请选择知识体系" @change="handleClassifyChange">
                            <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item of options"></el-option>
                        </el-select>
                    </el-form-item> -->
                </el-form>
            </div>
        </div>

        <div class="plan-item">
            <h2>问卷内容</h2>
            <div class="plan-item-content paper-content">
                <ul>
                    <li class="paper-content-item" v-for="(item, index) of subject">
                        <template v-if="item.type === 0">
                            <h3>【单选题】{{item.name}}</h3>
                            <ol>
                                <li class="paper-radio" v-for="(item, index) of item.list">
                                    <input type="radio" disabled :checked="item.selected">
                                    <span :class="{actived: item.selected}"></span>
                                    {{item.name | format(index)}}
                                </li>
                            </ol>
                             <div class="side-wrapper">
                                <span class="iconfont" @click="editSubject(item, 0, index)">
                                    <svg class="svg-icon" viewBox="0 0 1029 1024" width="100%" height="100%"><path d="M970.105263 1024H59.284211c-32.336842 0-59.284211-26.947368-59.284211-59.284211V59.284211c0-32.336842 26.947368-59.284211 59.284211-59.284211h512v113.178947h-452.71579v792.252632h792.252632v-452.71579h113.178947v512c5.389474 32.336842-21.557895 59.284211-53.894737 59.284211z m-549.726316-355.705263c-21.557895-21.557895-21.557895-59.284211 0-80.842105l512-512c21.557895-21.557895 59.284211-21.557895 80.842106 0 21.557895 21.557895 21.557895 59.284211 0 80.842105l-512 512c-21.557895 21.557895-59.284211 21.557895-80.842106 0z" fill="#C1C6D4"></path></svg>
                                </span>
                                <span @click="deleteSubject(index)">
                                    <svg class="svg-icon" viewBox="0 0 1024 1024" width="100%" height="100%">
                                        <path d="M856.165975 331.419087l-33.991701 645.842324c0 25.493776-21.244813 42.489627-42.489627 42.489626h-543.86722c-21.244813 0-42.489627-16.995851-42.489626-42.489626l-33.991701-645.842324c0-25.493776 16.995851-46.738589 42.489626-46.738589s42.489627 16.995851 46.738589 42.489626l29.742739 607.60166h463.136929l29.742739-607.60166c0-25.493776 21.244813-42.489627 46.738589-42.489626 21.244813 4.248963 38.240664 25.493776 38.240664 46.738589z m114.721992-148.713693c0 25.493776-21.244813 46.738589-42.489627 46.738589H87.103734c-25.493776 0-42.489627-21.244813-42.489626-46.738589s21.244813-46.738589 42.489626-46.738589h237.941909v-101.975104c0-21.244813 12.746888-33.991701 33.991701-33.991701h297.427386c21.244813 0 33.991701 12.746888 33.991702 33.991701v101.975104h237.941908c21.244813 4.248963 42.489627 21.244813 42.489627 46.738589z m-569.360996-42.489626h216.697095v-55.236515h-216.697095v55.236515z m16.995851 726.572614c21.244813 0 38.240664-21.244813 38.240663-42.489627l-12.746887-484.381743c0-21.244813-16.995851-38.240664-38.240664-38.240663s-38.240664 16.995851-38.240664 38.240663l12.746888 484.381743c0 21.244813 16.995851 42.489627 38.240664 42.489627z m178.456431 0c21.244813 0 38.240664-16.995851 38.240664-38.240664l12.746888-484.381743c0-21.244813-16.995851-38.240664-38.240664-42.489626-21.244813 0-38.240664 16.995851-38.240664 38.240663l-12.746888 484.381743c0 21.244813 16.995851 42.489627 38.240664 42.489627z" fill="#C1C6D4"></path>
                                    </svg>

                                </span>
                            </div>
                        </template>

                        <template v-if="item.type === 1">
                            <h3>【多选题】{{item.name}}</h3>
                            <ol>
                                <li v-for="(item, index) of item.list">
                                    <!-- <el-checkbox  :checked="item.selected"></el-checkbox> -->
                                    <!-- <input type="checkbox" disabled :checked="item.selected"> -->
                                    <span class="paper-checkbox" :class="{actived: item.selected}"></span>
                                    {{item.name | format(index)}}
                                </li>
                            </ol>
                             <div class="side-wrapper">
                                <span @click="editSubject(item, 1, index)">
                                    <svg class="svg-icon" viewBox="0 0 1029 1024" width="100%" height="100%"><path d="M970.105263 1024H59.284211c-32.336842 0-59.284211-26.947368-59.284211-59.284211V59.284211c0-32.336842 26.947368-59.284211 59.284211-59.284211h512v113.178947h-452.71579v792.252632h792.252632v-452.71579h113.178947v512c5.389474 32.336842-21.557895 59.284211-53.894737 59.284211z m-549.726316-355.705263c-21.557895-21.557895-21.557895-59.284211 0-80.842105l512-512c21.557895-21.557895 59.284211-21.557895 80.842106 0 21.557895 21.557895 21.557895 59.284211 0 80.842105l-512 512c-21.557895 21.557895-59.284211 21.557895-80.842106 0z" fill="#C1C6D4"></path></svg>
                                </span>
                                <span @click="deleteSubject(index)">
                                    <svg class="svg-icon" viewBox="0 0 1024 1024" width="100%" height="100%">
                                        <path d="M856.165975 331.419087l-33.991701 645.842324c0 25.493776-21.244813 42.489627-42.489627 42.489626h-543.86722c-21.244813 0-42.489627-16.995851-42.489626-42.489626l-33.991701-645.842324c0-25.493776 16.995851-46.738589 42.489626-46.738589s42.489627 16.995851 46.738589 42.489626l29.742739 607.60166h463.136929l29.742739-607.60166c0-25.493776 21.244813-42.489627 46.738589-42.489626 21.244813 4.248963 38.240664 25.493776 38.240664 46.738589z m114.721992-148.713693c0 25.493776-21.244813 46.738589-42.489627 46.738589H87.103734c-25.493776 0-42.489627-21.244813-42.489626-46.738589s21.244813-46.738589 42.489626-46.738589h237.941909v-101.975104c0-21.244813 12.746888-33.991701 33.991701-33.991701h297.427386c21.244813 0 33.991701 12.746888 33.991702 33.991701v101.975104h237.941908c21.244813 4.248963 42.489627 21.244813 42.489627 46.738589z m-569.360996-42.489626h216.697095v-55.236515h-216.697095v55.236515z m16.995851 726.572614c21.244813 0 38.240664-21.244813 38.240663-42.489627l-12.746887-484.381743c0-21.244813-16.995851-38.240664-38.240664-38.240663s-38.240664 16.995851-38.240664 38.240663l12.746888 484.381743c0 21.244813 16.995851 42.489627 38.240664 42.489627z m178.456431 0c21.244813 0 38.240664-16.995851 38.240664-38.240664l12.746888-484.381743c0-21.244813-16.995851-38.240664-38.240664-42.489626-21.244813 0-38.240664 16.995851-38.240664 38.240663l-12.746888 484.381743c0 21.244813 16.995851 42.489627 38.240664 42.489627z" fill="#C1C6D4"></path>
                                    </svg>
                                </span>
                            </div>
                        </template>

                        <template v-if="item.type === 2">
                            <h3>【问答题】{{item.name}}</h3>
                            <el-input type="textarea" resize="none" :rows="4" placeholder="" disabled></el-input>
                            <div class="side-wrapper">
                                <span @click="editSubject(item, 2, index)">
                                    <svg class="svg-icon" viewBox="0 0 1029 1024" width="100%" height="100%"><path d="M970.105263 1024H59.284211c-32.336842 0-59.284211-26.947368-59.284211-59.284211V59.284211c0-32.336842 26.947368-59.284211 59.284211-59.284211h512v113.178947h-452.71579v792.252632h792.252632v-452.71579h113.178947v512c5.389474 32.336842-21.557895 59.284211-53.894737 59.284211z m-549.726316-355.705263c-21.557895-21.557895-21.557895-59.284211 0-80.842105l512-512c21.557895-21.557895 59.284211-21.557895 80.842106 0 21.557895 21.557895 21.557895 59.284211 0 80.842105l-512 512c-21.557895 21.557895-59.284211 21.557895-80.842106 0z" fill="#C1C6D4"></path></svg>
                                </span>
                                <span @click="deleteSubject(index)">
                                    <svg class="svg-icon" viewBox="0 0 1024 1024" width="100%" height="100%">
                                        <path d="M856.165975 331.419087l-33.991701 645.842324c0 25.493776-21.244813 42.489627-42.489627 42.489626h-543.86722c-21.244813 0-42.489627-16.995851-42.489626-42.489626l-33.991701-645.842324c0-25.493776 16.995851-46.738589 42.489626-46.738589s42.489627 16.995851 46.738589 42.489626l29.742739 607.60166h463.136929l29.742739-607.60166c0-25.493776 21.244813-42.489627 46.738589-42.489626 21.244813 4.248963 38.240664 25.493776 38.240664 46.738589z m114.721992-148.713693c0 25.493776-21.244813 46.738589-42.489627 46.738589H87.103734c-25.493776 0-42.489627-21.244813-42.489626-46.738589s21.244813-46.738589 42.489626-46.738589h237.941909v-101.975104c0-21.244813 12.746888-33.991701 33.991701-33.991701h297.427386c21.244813 0 33.991701 12.746888 33.991702 33.991701v101.975104h237.941908c21.244813 4.248963 42.489627 21.244813 42.489627 46.738589z m-569.360996-42.489626h216.697095v-55.236515h-216.697095v55.236515z m16.995851 726.572614c21.244813 0 38.240664-21.244813 38.240663-42.489627l-12.746887-484.381743c0-21.244813-16.995851-38.240664-38.240664-38.240663s-38.240664 16.995851-38.240664 38.240663l12.746888 484.381743c0 21.244813 16.995851 42.489627 38.240664 42.489627z m178.456431 0c21.244813 0 38.240664-16.995851 38.240664-38.240664l12.746888-484.381743c0-21.244813-16.995851-38.240664-38.240664-42.489626-21.244813 0-38.240664 16.995851-38.240664 38.240663l-12.746888 484.381743c0 21.244813 16.995851 42.489627 38.240664 42.489627z" fill="#C1C6D4"></path>
                                    </svg>
                                </span>
                            </div>
                        </template>
                    </li>
                </ul>

                <div class="paper-content-select">
                    <div class="add-subject-btn">添加试题</div>
                    <el-select v-model="subjectType" popper-class="paper-content-options" placeholder="请选择" @change="handleSubjectTypeChange">
                        <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item of contentOptions"></el-option>
                    </el-select>
                </div>
            </div>
        </div>

        <!-- <div class="plan-item">
            <h2>试卷合计</h2>
            <div class="plan-item-content paper-total" :class="{'paper-hidden-table': ! paperTotal.length}">
                <el-table :data="paperTotal" show-summary header-cell-class-name="plan-item-th" :header-cell-style="{backgroundColor: '#F4F7FD'}">
                    <el-table-column prop="name" label="名称"></el-table-column>
                    <el-table-column prop="num" label="题数"></el-table-column>
                    <el-table-column prop="score" label="分值"></el-table-column>
                </el-table>
            </div>
        </div> -->

        <!-- <div class="plan-item">
            <h2>考试设置</h2>
            <div class="plan-item-content setting">
                <el-form ref="form" :model="formSetting" label-width="80px">
                    <el-form-item label="合格分数">
                        <el-input v-model="formSetting.score" placeholder="请输入合格分数"></el-input>
                    </el-form-item>
                    <el-form-item label="考试时长">
                        <el-input v-model="formSetting.time" placeholder="请输入考试时长，单位分钟"></el-input>
                    </el-form-item>
                    <el-form-item label="考试描述">
                        <el-input type="textarea" :rows="3" maxlength="140" resize="none" v-model="formSetting.desc" placeholder="请输入备注"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div> -->

        <div class="btn-wrapper">
            <el-button type="primary" @click="save" v-if="! saving">保存问卷</el-button>
            <el-button type="primary" disabled v-else>保存中...</el-button>

            <el-button @click="preview">预览试卷</el-button>
        </div>

        <!-- 知识体系 -->
       <!--  <el-dialog title="创建知识体系" custom-class="classify-dialog" :top="0" :show-close="false" :visible.sync="classifyModalStatus">
            <el-form :model="dialogClassifyForm" @submit.native.prevent>
                <el-form-item>
                    <el-input v-model="dialogClassifyForm.name" autofocus maxlength="8" placeholder="请输入知识体系" @keyup.enter.native="handleClassifyModalStatusChange(true)"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer">
                <el-button type="text" class="no-border" @click="handleClassifyModalStatusChange(false)">取消</el-button>
                <el-button type="primary" @click="handleClassifyModalStatusChange(true)">确定</el-button>
            </div>
        </el-dialog> -->

        <!-- 单选题 -->
        <el-dialog title="创建单选题" custom-class="single-dialog" :top="0" :show-close="false" :close-on-click-modal="false" :visible.sync="singleStatus">
            <div class="single-header">
                <div>
                    <label>
                        <span class="required">*</span>
                        题目
                        <el-input v-model="singleName" maxlength="140" placeholder="请输入题目"></el-input>
                    </label>
                </div>
                <!-- <div>
                    分值
                    <el-input class="score-input" v-model="singleScore"></el-input>
                    分
                </div> -->
            </div>

            <el-table :data="singleTable" ref="singleTable"  header-cell-class-name=" plan-item-th" @select="singleSelectionChange" :header-cell-style="{backgroundColor: '#F4F7FD'}" v-if="singleTable.length">
                <el-table-column prop="name" label="选项">
                    <template slot-scope="one">
                        <div class="single-icon-input" v-if="one.row.status">
                            <label>{{ idCode[one.$index]}}、</label>
                            <input type="text" class="single-input" v-model.lazy="one.row.name" placeholder="请输入选项" @blur="signInputBlur(one.row)">
                        </div>

                        <div class="single-icon-wrapper" v-else>
                            <el-tooltip class="item" effect="dark" :content="one.row.name" placement="top" v-if="one.row.name.length > 30">
                                <span>{{one.row.name}}</span>
                            </el-tooltip>

                            <span v-else>{{one.row.name | format(one.$index)}}</span>

                            <div class="icons" @click="one.row.status = true"></div>
                        </div>

                    </template>
                </el-table-column>
                <!-- <el-table-column width="165" type="selection" label="答案"></el-table-column> -->
                <el-table-column prop="score" label="操作">
                    <template slot-scope="one">
                        <div class="operate">

                            <i class="icon iconfont forbid" v-if=" one.$index == 0"></i>
                            <i class="icon iconfont" @click="singleMove(one.$index, one.$index-1)" v-else></i>

                            <i class="icon iconfont forbid" v-if=" one.$index == singleTable.length-1 "></i>
                            <i class="icon iconfont" @click="singleMove(one.$index, one.$index + 1)" v-else></i>
                            <i class="icon iconfont" @click="singleDelete(one.row)"></i>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <!-- <div class="single-th" v-if="singleTable.length">答案</div> -->

            <div class="add-options-btn" @click="addSingleOptions" v-if="singleTable.length < 10">添加选项</div>

            <div slot="footer">
                <el-button type="text" class="no-border" @click="singleOK(false)">取消</el-button>
                <!-- <el-button @click="singleOK(true)">创建并加入题库</el-button> -->
                <el-button type="primary" @click="singleOK(true)">确定</el-button>
            </div>
        </el-dialog>

        <!-- 多选题 -->
        <el-dialog title="创建多选题" custom-class="single-dialog" :top="0" :show-close="false" :close-on-click-modal="false" :visible.sync="duoStatus">
            <div class="single-header">
                <div>
                    <label>
                        <span class="required">*</span>
                        题目
                        <el-input v-model="duoName" maxlength="140" placeholder="请输入题目"></el-input>
                    </label>
                </div>
                <!-- <div>
                    分值
                    <el-input class="score-input" v-model="duoScore"></el-input>
                    分
                </div> -->
            </div>

            <el-table :data="duoTable" ref="duoTable" header-cell-class-name="plan-item-th" @select="duoSelectionChange" :header-cell-style="{backgroundColor: '#F4F7FD'}" v-if="duoTable.length">
                <el-table-column prop="name" label="选项">
                    <template slot-scope="one">
                        <div class="single-icon-input" v-if="one.row.status">
                            <label>{{ idCode[one.$index]}}、</label>
                            <input type="text" class="single-input" v-model.lazy="one.row.name" placeholder="请输入选项" @blur="signInputBlur(one.row)">
                        </div>
                        <div class="single-icon-wrapper" v-else>
                            <el-tooltip class="item" effect="dark" :content="one.row.name" placement="top" v-if="one.row.name.length > 30">
                                <span>{{one.row.name}}</span>
                            </el-tooltip>

                            <span v-else>{{one.row.name | format(one.$index)}}</span>
                            <div class="icons" @click="one.row.status = true"></div>
                        </div>

                    </template>
                </el-table-column>
                <!-- <el-table-column width="165" type="selection" label="答案"></el-table-column> -->
                <el-table-column prop="score" label="操作">
                    <template slot-scope="one">
                        <i class="icon iconfont forbid" v-if=" one.$index == 0"></i>
                            <i class="icon iconfont" @click="duoMove(one.$index, one.$index-1)" v-else></i>
                            <!-- 上 -->
                            <i class="icon iconfont forbid" v-if=" one.$index == duoTable.length-1 "></i>
                            <i class="icon iconfont" @click="duoMove(one.$index, one.$index + 1)" v-else></i>
                            <i class="icon iconfont" @click="duoDelete(one.row)"></i>
                    </template>
                </el-table-column>
            </el-table>

            <!-- <div class="single-th" v-if="duoTable.length">答案</div> -->

            <div class="add-options-btn" @click="addDuoOptions" v-if="duoTable.length < 10">添加选项</div>

            <div slot="footer">
                <el-button type="text" class="no-border" @click="duoOK(false)">取消</el-button>
                <!-- <el-button @click="duoOK(true)">创建并加入题库</el-button> -->
                <el-button type="primary" @click="duoOK(true)">确定</el-button>
            </div>
        </el-dialog>

        <!-- 问答题 -->
        <el-dialog title="创建问答题" custom-class="classify-dialog wenda-dialog" :top="0" :show-close="false" :visible.sync="wendaModalStatus">
            <el-form :model="dialogWendaForm" @submit.native.prevent>
                <el-form-item>
                    <el-input v-model="dialogWendaForm.name" autofocus maxlength="140" placeholder="请输入题目" @keyup.enter.native="handleWendaModalStatusChange(true)"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer">
                <el-button type="text" class="no-border" @click="handleWendaModalStatusChange(false)">取消</el-button>
                <!-- <el-button @click="handleWendaModalStatusChange(true)">创建并加入题库</el-button> -->
                <el-button type="primary" @click="handleWendaModalStatusChange(true)">确定</el-button>
            </div>
        </el-dialog>

        <!-- 删除提示 -->
        <el-dialog title="温馨提示" custom-class="classify-dialog" :top="0" :show-close="false" :visible.sync="deleteModalStatus">
            <span>题目删除后，将无法恢复</span>

            <div slot="footer">
                <el-button type="text" class="no-border" @click="deleteModalStatus = false">取消</el-button>
                <el-button type="primary" @click="deleteSubjectConfirm">确定</el-button>
            </div>
        </el-dialog>

        <!-- 题库 -->
        <el-dialog custom-class="tiku-dialog" :top="0" :close-on-click-modal="false" :show-close="false" :visible.sync="tikuModalStatus">
            <div class="tiku-header" slot="title">
                <h1>
                    选择题目
                    <span>已选择{{tikuSelectNum}}题</span>
                </h1>
                <div class="tiku-select-wrapper">
                    <!-- <el-select v-model="tikuClassify" popper-class="options tiku-options" placeholder="知识体系" @change="tikuClassifyChange">
                        <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item of tikuOptions"></el-option>
                    </el-select> -->
                    <el-select v-model="tikuType" popper-class="options tiku-options" placeholder="题目类型" @change="tikuTypeChange">
                        <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item of contentOptions.slice(0, 3)"></el-option>
                    </el-select>
                    <el-input v-model="tikuName" placeholder="请输入题目名称" suffix-icon="el-icon-search" @keyup.enter.native="getTikuList"></el-input>
                </div>
            </div>

            <el-table :data="tikuTable" ref="tikuTable" header-cell-class-name="plan-item-th" :header-cell-style="{backgroundColor: '#F4F7FD'}" @select="tikuSelectionChange">
                <el-table-column type="selection" label="答案"></el-table-column>
                <el-table-column prop="QuestionTitle" label="题目" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="RightScore" label="题分"></el-table-column>
            </el-table>

            <div slot="footer" class="tiku-footer">
                <el-pagination layout="prev, pager, next" :page-size="4" :total="tikuTotal" @current-change="tikuPageChange"></el-pagination>
                <el-button type="text" class="no-border" @click="tikuCancel">取消</el-button>
                <el-button type="primary" @click="tikuOk">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import qs from 'qs'

    Array.prototype.someIndex = function(x,y){
      this.splice(x,1, ...this.splice(y, 1, this[x]))
      return this;
    }

    export default {
        data() {
            return {
                deleteModalStatus: false,
                idCode:['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'G'],
                saving: false,

                form: {
                    examName: '',
                    //classify: ''
                },

                classifyModalStatus: false,
                dialogClassifyForm: {
                    name: ''
                },
                options: [
                    {
                        label: '创建试卷类型',
                        value: -1
                    }
                ],
                rules: {
                    examName: [
                        { required: true, message: '请输入考试名称', trigger: 'blur' },
                    ]
                },

                subject: [],

                subjectType: '',
                contentOptions: [
                    {
                        label: '单选题',
                        value: 0
                    },
                    {
                        label: '多选题',
                        value: 1
                    },
                    {
                        label: '问答题',
                        value: 2
                    },
                    {
                        label: '从题库中选择',
                        value: 3
                    }
                ],

                path:[
                    {
                        name:'效果评估',
                        path:'/effect/test-papers'
                    },
                    {
                        name:'问卷库',
                        path:'/effect/survey'
                    },
                    {
                        name:"编辑问卷"
                    }
                ],

                singleInput: '',
                singleName: '',
                singleScore: '',
                singleStatus: false,
                singleTable: [],
                //paperTotal: [],

                duoInput: '',
                duoName: '',
                duoScore: '',
                duoStatus: false,
                duoTable: [],

                wendaModalStatus: false,
                dialogWendaForm: {
                    name: ''
                },

                formSetting: {
                    score: '',
                    time: '',
                    desc: ''
                },

                tikuModalStatus: false,
                tikuSelect: [],
                tikuClassify: '',
                tikuList: [],
                tikuType: '',
                page: 1,
                tikuTotal: 0
            }
        },

        computed: {
            tikuSelectNum() {
                return this.tikuSelect.length
            },
            tikuTable() {
                return this.tikuList

                const index = (this.page - 1) * 4

                return this.tikuList.slice(index, index + 4)
            },
            tikuOptions() {
                return [... this.options.slice(0, this.options.length - 1), {
                    label: '全部',
                    value: -1
                }]
            },
            paperTotal() {
                const temp = []

                this.subject.forEach((item) => {
                    if (item.type === 0) {
                        const obj = temp.find((item) => item.name === '单选题')

                        if (obj) {
                            obj.num++
                        } else {
                            temp.push({
                                name: '单选题',
                                score: item.score,
                                num: 1
                            })
                        }
                    }

                    if (item.type === 1) {
                        const obj = temp.find((item) => item.name === '多选题')

                        if (obj) {
                            obj.num++
                        } else {
                            temp.push({
                                name: '多选题',
                                score: item.score,
                                num: 1
                            })
                        }
                    }

                    if (item.type === 2) {
                        const obj = temp.find((item) => item.name === '问答题')

                        if (obj) {
                            obj.num++
                        } else {
                            temp.push({
                                name: '问答题',
                                score: 0,
                                num: 1
                            })
                        }
                    }
                })

                return temp
            }
        },

        filters: {
            format(value, index) {
                const temp = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'G']

                return `${temp[index]}、${value}`
            }
        },

        created() {
            // 获取知识体系
            // this.getClassifyList()

            // 题库
            this.getTikuList()

            this.$store.commit('setPath', this.path)

            !localStorage.getItem('editwenPaperPreview') && this.setParam()

        },

        beforeRouteEnter(to, from, next) {
            next((vm) => {
                // 设置面包屑
                vm.$store.commit('setPath', vm.path)

                if(!localStorage.getItem('editwenPaperPreview')) return;

                // 拉取数据
                const temp = JSON.parse(localStorage.getItem('editwenPaperPreview'))

                vm.form = temp.form
                vm.formSetting = temp.formSetting
                vm.subject = temp.subject


                localStorage.removeItem('editwenPaperPreview')
            })

        },

        methods: {
            tikuPageChange(page) {
                this.page = page

                this.getTikuList()
            },
            tikuCancel() {
                this.tikuModalStatus = false
                this.subjectType = -1
            },
            tikuOk() {
                if (! this.tikuSelect.length) {
                    this.$message('请选择选项')

                    return
                }

                this.subjectType = -1
                this.tikuType = ''
                this.tikuModalStatus = false

                this.subject.push(... this.tikuSelect)

                this.$refs.tikuTable.clearSelection()

                this.tikuSelect = []

            },
            tikuSelectionChange(selection, row) {
                console.log(selection)

                const index = this.tikuSelect.findIndex((item) => item.QID === row.QID)

                if (index !== -1) {
                    this.tikuSelect.splice(index, 1)
                } else {
                    const temp = {
                        name: row.QuestionTitle,
                        QID: row.QID
                    }

                    if (+ row.QuestionType === 1) {
                        temp.type = 1
                        temp.score = + row.RightScore

                        const arr = row.RightAnswerIndexs.split(',').map((item) => + item)

                        temp.list = row.options.map((item, index) => {
                            return {
                                name: item.AnswerValue,
                                AnswerID: item.AnswerID,
                                selected: arr.includes(index)
                            }
                        })
                    }

                    if (+ row.QuestionType === 2) {
                        temp.type = 0
                        temp.score = + row.RightScore

                        temp.list = row.options.map((item, index) => {
                            return {
                                name: item.AnswerValue,
                                AnswerID: item.AnswerID,
                                selected: index === + row.RightAnswerIndexs
                            }
                        })
                    }

                    if (+ row.QuestionType === 3) {
                        temp.type = 2
                    }

                    this.tikuSelect.push(temp)
                }

                // this.tikuSelect.push(... selection.map((item) => {
                //     const temp = {
                //         name: item.QuestionTitle,
                //         QID: item.QID
                //     }

                //     if (+ item.QuestionType === 1) {
                //         temp.type = 1
                //     }

                //     if (+ item.QuestionType === 2) {
                //         temp.type = 0
                //     }

                //     if (+ item.QuestionType === 3) {
                //         temp.type = 2
                //     }

                //     return temp
                // }))
            },
            tikuClassifyChange() {
                if (this.tikuClassify === -1) {
                    this.tikuClassify = ''
                }

                this.getTikuList()
            },
            tikuTypeChange() {
                this.getTikuList()
            },
            async getTikuList() {
                const params = {
                    page: this.page,
                    pagesize: 4,
                    optionsNeed: 1
                }

                if (this.tikuName) {
                    params.keywords = this.tikuName
                }

                if (this.tikuClassify) {
                    params.infoCateID = this.tikuClassify
                }

                if (this.tikuType === 0) {
                    params.questionType = 2
                }

                if (this.tikuType === 1) {
                    params.questionType = 1
                }

                if (this.tikuType === 2) {
                    params.questionType = 3
                }

                const {data} = await axios.post('/com/exam/getLibQuestionList', qs.stringify(params))

                if (data.flag === 1) {
                    this.tikuList = data.data.Rows
                    this.tikuTotal = data.data.Total

                    this.$nextTick(() => {
                        this.tikuSelect.forEach((item) => {
                            const temp = this.tikuList.find((it) => it.QID === item.QID)

                            if (temp) {
                                this.$refs.tikuTable.toggleRowSelection(temp)
                            }
                        })
                    })
                }
            },
            async getClassifyList() {
                const {data} = await axios.post('/com/info-cates/list')

                if (data.flag === 1) {
                    this.options.unshift(... data.data.InfoCateList.map((item) => ({
                        label: item.CateName,
                        value: item.InfoCateID
                    })))
                }
            },
            async addClassify() {
                const {data} = await axios.post('/com/info-cates/add', qs.stringify({
                    cateName: this.dialogClassifyForm.name
                }))

                return data.data.InfoCate
            },
            editSubject(item, type, index) {
                if (type === 0) {
                    this.$edit = true
                    this.$index = index

                    this.singleName = item.name
                    this.singleScore = item.score

                    this.singleTable = item.list

                    this.$nextTick(() => {
                        this.singleTable.forEach((item) => {
                            item.selected && this.$refs.singleTable.toggleRowSelection(item)
                        })
                    })

                    this.singleStatus = true
                }

                if (type === 1) {
                    this.$edit = true
                    this.$index = index

                    this.duoName = item.name
                    this.duoScore = item.score

                    this.duoTable = item.list

                    this.$nextTick(() => {
                        this.duoTable.forEach((item) => {
                            item.selected && this.$refs.duoTable.toggleRowSelection(item)
                        })
                    })

                    this.duoStatus = true
                }

                if (type === 2) {
                    this.$edit = true
                    this.$index = index

                    this.dialogWendaForm.name = item.name
                    this.wendaModalStatus = true
                }
            },
            deleteSubject(index) {
                this.$index = index

                this.deleteModalStatus = true
            },
            deleteSubjectConfirm() {
                this.deleteModalStatus = false
                this.subject.splice(this.$index, 1)

                this.$index = null
            },
            // handleClassifyChange(value) {
            //     if (value === -1) {
            //         this.form.classify = ''

            //         this.classifyModalStatus = true
            //     }
            // },
            handleSubjectTypeChange(value) {
                if (value === 0) {
                    this.singleStatus = true
                }

                if (value === 1) {
                    this.duoStatus = true
                }

                if (value === 2) {
                    this.wendaModalStatus = true
                }

                if (value === 3) {
                    this.tikuModalStatus = true
                }
            },

            // handleClassifyModalStatusChange(value) {
            //     if (value) {
            //         const name = this.dialogClassifyForm.name.trim()

            //         if (name) {
            //             if (this.options.find((item) => item.label === name)) {
            //                 this.$message('已存在，请重新输入')
            //             } else {

            //                 this.addClassify().then((data) => {
            //                     this.options.splice(this.options.length - 1, 0, {
            //                         label: name,
            //                         value: data.InfoCateID
            //                     })
            //                 })

            //                 this.classifyModalStatus = false
            //             }
            //         } else {
            //             this.$message('请输入知识体系')
            //         }

            //         this.dialogClassifyForm.name = ''

            //         return
            //     }

            //     this.classifyModalStatus = false
            // },
            //
            handleWendaModalStatusChange(value, type) {
                if (value) {
                    const name = this.dialogWendaForm.name.trim()

                    if (name) {
                        if (this.subject.find((item) => item.type === 2 && item.name === name)) {
                            this.$message('题目已存在，请重新输入')
                        } else {
                            if (this.$edit) {
                                this.subject[this.$index].name = name
                            } else {
                                this.subject.push({
                                    type: 2,
                                    name
                                })
                            }

                            this.wendaModalStatus = false
                        }
                    } else {
                        this.$message('请输入题目')
                    }

                    this.dialogWendaForm.name = ''
                    this.subjectType = -1

                    if (type === 1) {
                        this.$wendaObj = {
                            'question[QuestionType]': 3,
                            'question[QuestionTitle]': name
                        }
                    }

                    return
                }

                this.wendaModalStatus = false
                this.dialogWendaForm.name = ''
                this.subjectType = -1
            },
            singleOK(value) {
                if (value) {
                    console.log(this.singleTable)

                    if (! this.singleName.trim()) {
                        this.$message('请输入题目')

                        return
                    }

                    if (! this.singleTable.length) {
                        this.$message('请添加选项')

                        return
                    }

                    // if (! (this.singleScore + '').trim()) {
                    //     this.$message('请输入分数')

                    //     return
                    // }

                    // if (! /^(\d+)$/.test(this.singleScore)) {
                    //     this.$message('请输入数字格式的分数')

                    //     return
                    // }

                    // if (! this.singleTable.find((item) => item.selected === true)) {
                    //     this.$message('请选择答案')

                    //     return
                    // }

                    if (this.$edit) {
                        this.subject[this.$index].name = this.singleName
                        //this.subject[this.$index].score = this.singleScore
                    } else {
                        this.subject.push({
                            type: 0,
                            name: this.singleName,
                            //score: this.singleScore,
                            list: [... this.singleTable]
                        })
                    }

                    // 重置状态
                    this.$edit = null
                    this.$index = null

                    //return
                }

                this.singleName = ''
                this.singleScore = ''
                this.singleStatus = false
                this.subjectType = -1
                this.singleTable = []
            },
            duoOK(value, type) {
                if (value) {
                    //console.log(this.singleTable)

                    if (! this.duoName.trim()) {
                        this.$message('请输入题目')

                        return
                    }

                    if (! this.duoTable.length) {
                        this.$message('请添加选项')

                        return
                    }

                    // if (! (this.duoScore + '').trim()) {
                    //     this.$message('请输入分数')

                    //     return
                    // }

                    // if (! /^(\d+)$/.test(this.duoScore)) {
                    //     this.$message('请输入数字格式的分数')

                    //     return
                    // }

                    // if (! this.duoTable.find((item) => item.selected === true)) {
                    //     this.$message('请选择答案')

                    //     return
                    // }

                    if (this.$edit) {
                        this.subject[this.$index].name = this.duoName
                        //this.subject[this.$index].score = this.duoScore

                        // setTimeout(() => {
                        //     this.subject = JSON.parse(JSON.stringify(this.subject))
                        //     console.log(this.subject)
                        // }, 2000)
                    } else {
                        this.subject.push({
                            type: 1,
                            name: this.duoName,
                            //score: this.duoScore,
                            list: [... this.duoTable]
                        })
                    }

                    // 重置状态
                    this.$edit = null
                    this.$index = null

                    // 保存题库
                    if (type) {
                        const arr = []
                        const temp = {
                            'question[QuestionType': 1,
                            'question[QuestionTitle]': this.duoName,
                            'question[RightScore]': this.duoScore,
                        }

                        this.duoTable.forEach((item, index) => {
                            temp[`question[Answers][${index}][AnswerValue]`] = item.name
                            if (item.selected) {
                                arr.push(index)
                            }
                        })

                        temp['question[RightAnswerIndexs]'] = arr.join()

                        this.$duoObj = temp
                    }

                    //return
                }

                this.duoName = ''
                this.duoScore = ''
                this.duoStatus = false
                this.subjectType = -1
                this.duoTable = []
            },
            singleSelectionChange(value, row) {
                this.singleTable.forEach((item) => item.selected = false)
                row.selected = true

                this.$refs.singleTable.clearSelection()
                this.$refs.singleTable.toggleRowSelection(row)
            },
            duoSelectionChange(value, row) {
                row.selected = ! row.selected
            },

            singleMove(x, y) {
                this.singleTable.someIndex(x,y)
            },

            singleDelete(row) {
                this.singleTable.splice(this.singleTable.findIndex((item) => row === item), 1)
            },

            duoMove(x, y){
                this.duoTable.someIndex(x,y)
            },

            duoDelete(row) {
                this.duoTable.splice(this.duoTable.findIndex((item) => row === item), 1)
            },
            addSingleOptions() {
                this.singleTable.push({
                    name: '',
                    status: true,
                    selected: false
                })

                // 滚动条
                this.$nextTick(() => {
                    const temp = document.querySelector('.is-scroll-right')

                    if (temp) {
                        temp.scrollTop = 9999
                    }
                })
            },
            addDuoOptions() {
                this.duoTable.push({
                    name: '',
                    status: true,
                    selected: false
                })

                // 滚动条
                this.$nextTick(() => {
                    const temp = document.querySelector('.is-scroll-right')

                    if (temp) {
                        temp.scrollTop = 9999
                    }
                })
            },
            signInputBlur(row) {
                row.name.trim() && (row.status = false)
                // if (row.name) {
                //     row.name = this.singleInput

                //     this.singleInput = ''
                // }
            },
            async save() {
                if (! this.form.examName.trim()) {
                    this.$message('请输入考试名称')

                    return
                }

                // if (! this.formSetting.score.trim()) {
                //     this.$message('请输入合格分数')

                //     return
                // }

                // if (! /^(\d+)$/.test(this.formSetting.score)) {
                //     this.$message('请输入数字格式的合格分数')

                //     return
                // }

                // if (! this.formSetting.time.trim()) {
                //     this.$message('请输入考试时长')

                //     return
                // }

                // if (! /^(\d+)$/.test(this.formSetting.time)) {
                //     this.$message('请输入数字格式的时长')

                //     return
                // }

                // if (! this.formSetting.desc.trim()) {
                //     this.$message('请输入备注')

                //     return
                // }

                this.saving = true

                const params = {
                    examTitle: this.form.examName,
                    //infoCateID: this.form.classify,
                    //passScore: this.formSetting.score,
                    //allowCostTime: this.formSetting.time,
                    examDesc: this.formSetting.desc
                }

                // 题目列表
                this.subject.forEach((item, index) => {
                    if (item.type === 0) {
                        params[`questions[${index}][QuestionType]`] = 2
                    } else if (item.type === 1) {
                        params[`questions[${index}][QuestionType]`] = 1
                    } else {
                        params[`questions[${index}][QuestionType]`] = 3
                    }

                    params[`questions[${index}][QuestionTitle]`] = item.name
                    params[`questions[${index}][IsNeed]`] = 0


                    if (item.QID) {
                        params[`questions[${index}][QID]`] = item.QID
                    }

                    if (typeof item.score !== 'undefined') {
                        params[`questions[${index}][RightScore]`] = item.score
                    }

                    params[`questions[${index}][ExamLibQID]`] = item.ExamLibQID

                    const arr = []

                    item.list && item.list.forEach((it, ii) => {
                        //i.selected && (params[`questions[${index}][RightAnswerIndexs]`] = index)

                        if (it.selected) {
                            arr.push(ii)
                        }

                        params[`questions[${index}][Answers][${ii}][AnswerValue]`] = it.name
                        params[`questions[${index}][Answers][${ii}][AnswerID]`] = it.AnswerID
                    })

                    params[`questions[${index}][RightAnswerIndexs]`] = arr.join()
                })

                params['ExamLibID'] = this.$route.query.ExamLibID

                const tempArr = [axios.post('/com/exam/editQNRLib', qs.stringify(params))]

                // 保存到题库
                if (this.$wendaObj) {
                    this.$wendaObj.infoCateID = this.form.classify
                    tempArr.push(axios.post('/com/exam/addLibQuestion', qs.stringify(this.$wendaObj)))
                }

                const [{data}] = await Promise.all(tempArr)

                this.$wendaObj = null
                this.saving = false

                if (data.flag === 1) {

                    location.href =  '/effect/survey'
                } else {
                    this.$message(data.msg)
                }
            },

            async getQNRLib(id) {
                const {data} = await axios.post('/com/exam/getQNRLib', qs.stringify({
                    examLibID: id
                }))

                return data.data
            },


            setParam() {
                // //编辑获取试卷信息
                if(!!this.$route.query.ExamLibID) {
                    this.ExamLibID = this.$route.query.ExamLibID
                    let subject = []

                    this.getQNRLib(this.ExamLibID).then((value)=>{

                        this.form = {
                            examName:value.examTitle
                        }

                        this.formSetting.desc =  value.examDesc

                        value.questions.forEach((item, index)=>{

                            if(item.QuestionType == 2) {
                                subject[index] =  {
                                    type:0
                                }
                            } else if(item.QuestionType == 1) {
                                subject[index] =  {
                                    type:1
                                }
                            } else {
                                subject[index] =  {
                                    type:2
                                }
                            }

                            subject[index].name = item.QuestionTitle
                            subject[index].ExamLibQID = item.ExamLibQID

                            if(item.QID) {
                                subject[index].QID = item.QID
                            }

                            if (typeof item.RightScore !== 'undefined') {
                                subject[index].score = item.RightScore
                            }



                            // let RightAnswerIndexs = item.AnswerID.split(',')

                            let Answer = []

                            item.Answers && item.Answers.forEach((it, ii) => {
                                Answer[ii] = {'name' : it.AnswerValue.trim() }
                                Answer[ii].AnswerID = it.AnswerID
                                Answer[ii].status = false

                                // if(RightAnswerIndexs.indexOf(''+ ii) > -1) {
                                //     Answer[ii].selected = true
                                // }

                            })

                            subject[index].list = Answer
                        })

                        this.subject = [].concat(subject)
                    })



                } else {
                    this.$message.error('未获取到试卷id');
                }
            },
            preview() {
                localStorage.setItem('editwenPaperPreview', JSON.stringify(this.$data))


                this.$router.push({'path': '/effect/edit-paper-detail', query:{'type':1, 'ExamLibID' : this.ExamLibID}})

            }
        }
    }
</script>
